<template>
    <div class="flex-main">
        <div class="flex-body">
            <div class="m-class">
                <!-- 左边菜单 -->
                <ul class="m-classleft">
                    <li v-for="(item,index) in kindlist" :key="index"
                    :class="{'active':idx==index}"
                    @click="selectMenu(index)">{{item.GoodsKindName || item.CardName}}</li>
                </ul>
                <!-- 右边产品、卡项 -->
                <div class="m-classRight">
                    <p class="m-rightTit">{{kindlist[idx].GoodsKindName || kindlist[idx].CardName}}</p>
                    <div>
                        <class-item v-for="(item,index) in goodsList" :key="index" 
                        :type="type"
                        :goodsitem="item" @click.native="toProjectDetail(item.GoodsId ||item.Id)"></class-item>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>
<script>
import {goodsKindList,goodsListByKind,cardKindList,cardListByKind} from '@/api/views';
/**产品2、项目1、卡项3 */
export default {
    name:'',
    data () {
        return {
            idx:0,
            type:3,     /**产品2、项目1、卡项3 */
            kindlist:[{GoodsKindName:''}],
            goodsList:[],
        }
    },
    components: {
        classItem:()=>import('@/model/classPage/classPage_item'),
    },
    methods: {
        // 选择左边的类别
        selectMenu(index) {
            this.idx = index;
            if(this.type==2){
                this.getGoodsList(this.kindlist[index].GoodsKindNo);
            }
            if(this.type==3){
                this.getGoodsList(this.kindlist[index].CardKindNo);
            }
        },
        // 获取类别
        getGoodsKind() {
            let that = this;
            let type = that.type;       //当前的类别  产品or卡项
            let param = {
                customer_id:that.$utils.uid,
            }
            if(type==2){
                goodsKindList(param).then((result) => {
                    that.kindlist = result.list;
                    that.getGoodsList(result.list[0].GoodsKindNo);
                }).catch((err) => {
                    
                });
            }
            if(type==3){
                cardKindList(param).then((result) => {
                    that.kindlist = result.list;
                    that.getGoodsList(result.list[0].CardKindNo);
                }).catch((err) => {
                    
                });
            }
            
        },
        // 获取对应列表
        getGoodsList(GoodsKindNo) {
            let that = this;
            let type = that.type;
            this.$indicator.open('加载中...');
            if(type==2) {
                let param = {
                    GoodsKindNo:GoodsKindNo,
                    page:that.pageNo,
                    list_rows:10,
                    customer_id:'0091001709'
                }
                goodsListByKind(param).then(result=>{
                    that.goodsList = result.list.data;
                    this.$indicator.close();
                }).catch(err=>{this.$indicator.close();})
            }
            if(type==3) {
                let param = {
                    CardKindNo:GoodsKindNo,
                    page:that.pageNo,
                    list_rows:10,
                    customer_id:'0091001709'
                }
                cardListByKind(param).then(result=>{
                    that.goodsList = result.list.data;
                    this.$indicator.close();
                }).catch(err=>{this.$indicator.close();})
            }
        },
        // 跳转商品详情页面
        toProjectDetail(id) {
            let goodsid = id;
            console.log(goodsid);
            this.$router.push({path:'/projectDetail',query:{goodsid:goodsid,type:this.type}});
        }
    },
    mounted() {
        let that = this;
        this.$indicator.open('加载中...');
        this.getGoodsKind();
    }
}
</script>
<style lang="less" scoped src="@/less/classPage/classPage.less"></style>
